<template>
  <div class="index">
    <!-- 顶部导航栏 -->
    <van-nav-bar  @click-left="xqleft" title="购物详情" class="head">
        <template #left>
           <van-icon name="arrow-left" size="20px" />
        </template>
  
    </van-nav-bar>
<div>
    <!-- 上边图 -->
    <div>
      <img :src="list.pic" style="width:100%;"/>
    </div>
    <div class="group">
      <div class="a-group">
        <h4>{{list.name}}</h4><br>
        <span>鲜嫩爽口 清香入味</span><br>
        <span>全面质检</span>
      </div>
      <div class="b-group">
          <span>配送</span>
          <span>立即下单,预计 今日17:21送达</span><br>      
          <span>促销</span>
          <span>满9.9可换购超值商品</span><br>       
          <span>已领券</span>
        </div>
      <div class="c-group">
        <h4>用户评价</h4>
        <span>(54351)</span>
      </div>
    </div>  
  </div>
    <!-- 底部 -->
    <van-goods-action>
      <van-goods-action-icon icon="home-o" text="首页" @click="xqhome" />
      <van-goods-action-icon icon="chat-o" text="客服" @click="xqlxkf" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="xqgwc"/>
      <van-goods-action-button type="warning" text="加入购物车" @click="jrgwc" />
      <van-goods-action-button type="danger" text="立即购买" @click="xqbtn" />
    </van-goods-action>
  </div>
</template>
<script>
import {mapState} from "vuex"
export default {
  data() {
    return {
      current: 0,//轮播图
      h: "180px",//轮播高
      // list:
      //   {mz:"松花菜500g",kw:"鲜嫩爽口 清香入味",qmtj:"全面质检",ps:"配送",xd:"立即下单,预计 今日17:21送达",cx:"促销",man:"满9.9可换购超值商品",yjuan:"已领券",yhp:"用户评价",sz:5351,tp:require("../assets/detail/1.jpg")},
      list:{},
      count:0,
    };
  },
  //计算属性
   computed:{
    ...mapState(["jsshopping"])
  },

  methods: {
    // 左边的按钮
    xqleft() {this.$router.push("/fenlei");},
    //下边购物车
    xqgwc() { this.$router.push("/gouwuche");},
    //联系客服
    xqlxkf(){this.$router.push("/lianxikefu");},
    // 返回首页
    xqhome() {this.$router.push("/homes");},
    //加入购物车
    jrgwc(){
        // this.$store.commit('gwc',false)
        this.count++;
        if(this.count==1){
        this.onfuw(list=>{
          // console.log()
            // let s=JSON.stringify(list)
            let s=list
            // console.log(s)
            this.$store.commit('gwc',s)
        })
       }
    },
    //立即购买
    xqbtn(){},
    //请求数据
    onfuw(callback){
      let id=this.$route.params.id;
       //console.log(`输出`+id);
      this.axios.get(`/jisuapi/detail?id=${id}&appkey=b0e7418fe9bef46dcb47a53374ffbef1`)
      .then((res)=>{
        // console.log(res.data.result)
        let list=res.data.result.result;
        callback(list);
    })
    },
  },
  mounted(){
    // this.initSwipe();
    this.onfuw(list=>{this.list=list})
  },
};
</script>
<style scoped>
.index .van-nav-bar {
  /* 统一主色调 */
  background-color: rgb(123, 183, 253);
}
.index .van-nav-bar__title,
.index .van-nav-bar__left .van-icon,
.index .van-nav-bar__right .van-icon{
  color: white;
}
/* 内容 */
.group{
  text-align: justify;
  margin-left: 10px;
}
.group h4{
  display: inline;
}
.group span{
  display: inline;
  font-size: 13px;
}
.a-group{
  margin-bottom: 10px;
  line-height: 22px;
}
.b-group{
  margin-bottom: 10px;
  line-height: 35px;
}
.a-group >span:nth-child(3){
  color: #A4A4A5;
}
.b-group >span:nth-child(1){
  margin-right: 20px;
  font-weight:bolder;
}
.b-group >span:nth-child(4){
  margin-right: 20px;
  font-weight: bold;
}
.b-group >span:nth-child(7){
  margin-right: 20px;
  font-weight: bold;
}
.van-nav-bar .van-icon{
  color: black;
}
</style>